<!DOCTYPE html>
<!--压制HTML中文件的警告或者错误（只有当前文件中设置生效）-->
<!-- suppress ThymeleafVariablesResolveInspection -->
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 加载头部css -->
    <div th:replace="common/head::head"></div>
    <!-- 加载必要的js -->
    <div th:replace="common/script::script"></div>
    <!-- eyecss -->
    <link rel="stylesheet" href="/asserts/css/eye.css" th:href="@{/asserts/css/eye.css}">
</head>
<body>
<!-- main -->
<div class="row lyear-wrapper">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <div class="panel-heading">
                    <h3 class="panel-title">找回密码</h3>
                </div>
            </div>
            <div class="panel-body">
                <!-- 填写账号 -->
                <form id="accountForm" >
                    <div class="form-info">
                        <div class="info-field">
                            <h3 style="text-align:center">
                                第一步：输入用户账号
                            </h3><hr>
                            <div class="form-group">
                                <input class="form-control" type="text"
                                       id="user_account" name="user_account" autocomplete="off"
                                       placeholder="员工工号、邮箱或手机号"
                                       onkeypress="if(event.keyCode===13) {accountBtn.click();return false;}"/>
                            </div>
                            <br>
                            <div class="form-group">
                                <button class="btn btn-primary btn-w-xs " type="button" id="accountBtn">查找</button>
                                <a class="btn btn-primary	btn-w-xs " href="#" onClick="history.back(-1)">取消</a>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- 选择验证方式 -->
                <form id="modeForm" style="display:none">
                    <div class="form-info">
                        <div class="info-field">
                            <h3 style="text-align:center">
                                第二步：选择验证方式
                            </h3><hr>
                            <div class="form-group">
                                <select class="form-control" id="selectMode">
                                    <option selected value="0" id="default_mode">选择验证方式</option>
                                    <option value="1" id="user_email_mode" style="display:none"></option>
                                    <option value="2" id="user_phone_mode" style="display:none"></option>
                                </select>
                            </div>
                            <br>
                            <div class="form-group">
                                <a class="btn btn-primary btn-w-xs" href="#" onClick="history.back(-1)">取消</a>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- 填写邮箱验证码 -->
                <form id="emailForm" style="display:none">
                    <div class="form-info">
                        <div class="info-field">
                            <h3 style="text-align:center">
                                第三步：填写邮箱验证码
                            </h3><hr>
                            <div class="form-group">
                                <div class="input-group">
                                    <input id="emailcode" name="emailcode" type="hidden"/>
                                    <input class="form-control" type="text" autocomplete="off"
                                           id="email_code" name="email_code" disabled="disabled"
                                           placeholder="输入验证码"
                                           onkeypress="if(event.keyCode===13) {emailBtn.click();return false;}"/>
                                    <span class="input-group-btn"><button type="button" class="btn btn-primary" id="emailCodeBtn">免费获取验证码</button></span>
                                </div>
                            </div>
                            <br>
                            <div class="form-group">
                                <button type="button" class="btn btn-primary btn-w-xs" disabled="disabled" id="emailBtn">提交</button>
                                <button type="button" class="btn btn-primary btn-w-xs" id="modeBack1">返回</button>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- 填写手机短信验证码 -->
                <form id="phoneForm" style="display:none">
                    <div class="form-info">
                        <div class="info-field">
                            <h3 style="text-align:center">
                                第三步：填写手机验证码
                            </h3><hr>
                            <div class="form-group">
                                <div class="input-group">
                                    <input id="phonecode" name="phonecode" type="hidden"/>
                                    <input class="form-control" type="text" autocomplete="off"
                                           id="phone_code" name="phone_code" disabled="disabled"
                                           placeholder="输入验证码"
                                           onkeypress="if(event.keyCode===13) {phoneBtn.click();return false;}"/>
                                    <span class="input-group-btn"><button type="button" class="btn btn-primary" id="phoneCodeBtn">免费获取验证码</button></span>
                                </div>
                            </div>
                            <br>
                            <div class="form-group">
                                <button type="button" class="btn btn-primary btn-w-xs" disabled="disabled" id="phoneBtn">提交</button>
                                <button type="button" class="btn btn-primary btn-w-xs" id="modeBack2">返回</button>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- 填写新密码 -->
                <form id="passwordForm" style="display:none">
                    <div class="form-info">
                        <div class="info-field">
                            <h3 style="text-align:center">
                                第四步：填写新密码
                            </h3><hr>
                            <!-- 新密码输入框1 -->
                            <div class="form-group">
                                <div class="col-xs-10">
                                    <input class="form-control" type="password"
                                           id="user_password" name="user_password"
                                           placeholder="6~18位字符,必须包含数字、字母或特殊字符其中两项及以上"
                                           onkeypress="if(event.keyCode===13) {passwordBtn.click();return false;}"/>
                                </div>
                                <div class="example-icons">
                                    <i class="mdi mdi-eye" id="eye" onclick="hideShowNewPsw()"></i>
                                </div>
                            </div>
                            <!-- 新密码输入框2 -->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <input class="form-control" type="password"
                                           id="user_passwords" name="user_passwords"
                                           placeholder="请再次输入密码"
                                           onkeypress="if(event.keyCode===13) {passwordBtn.click();return false;}"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <button style="margin-top:20px" type="button" class="btn btn-primary btn-w-xs" id="passwordBtn">重置密码</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <hr>

            <footer class="col-sm-12 text-center">
                <p class="m-b-0">Copyright © 2019 <a href="http://zsjta.xicp.io/">Zhanbo</a>. All right reserved</p>
            </footer>
        </div>
    </div>
</div>
<!-- 自定义脚本 -->
<script type="text/javascript" src="/js/user/lossPassword.js" th:src="@{/js/user/lossPassword.js}"></script>
</body>
</html>
